<template>
    <CommonModal :isVisible="isVisible" :backgroundImage="modal7Png" @close="closeModal"
        :modalStyle="{ width: '1800px', height: '900px', minWidth: '1800px' }">
        <template #content>
            <!-- 输入框区域 -->
            <div class="rank-area">
                <div class="rank-item flex" v-for="(item, index) in rankList" :key="index">
                    <div class="rank-item-left flex items-center">
                        <img v-if="item.avatar" :src="avatarMap[item.avatar]" alt=""
                            style="width: 45px; height: 45px;">
                        <div class="nickname">{{ item.nickname }}</div>
                    </div>
                    <div class="rank-item-right" v-if="item.score != null && item.score !== undefined">
                        <div class="score">{{ item.score }}分</div>
                    </div>
                </div>
            </div>
        </template>
    </CommonModal>
</template>

<script setup>
import { ref, defineEmits, watch } from 'vue'
import CommonModal from './CommonModal.vue'
import api from '@/api'
import modal7Png from '@/assets/images/7/modal.png'
import avatar1Png from '@/assets/images/8/a1.png'
import avatar2Png from '@/assets/images/8/a2.png'
import avatar3Png from '@/assets/images/8/a3.png'
import avatar4Png from '@/assets/images/8/a4.png'
import avatar5Png from '@/assets/images/8/a5.png'
import avatar6Png from '@/assets/images/8/a6.png'
import avatar7Png from '@/assets/images/8/a7.png'
import avatar8Png from '@/assets/images/8/a8.png'
import avatar9Png from '@/assets/images/8/a9.png'
import avatar10Png from '@/assets/images/8/a10.png'

const avatarMap = {
    1: avatar1Png,
    2: avatar2Png,
    3: avatar3Png,
    4: avatar4Png,
    5: avatar5Png,
    6: avatar6Png,
    7: avatar7Png,
    8: avatar8Png,
    9: avatar9Png,
    10: avatar10Png,
}

const props = defineProps({
    isVisible: {
        type: Boolean,
        default: false
    }
})

const rankList = ref([])

//获取排名列表
const getRankList = async () => {
    try {
        const res = await api.question.getScoreList();
        let data = res.data.records || []
        rankList.value = data.map(item => ({
            nickname: item.title,
            score: item.location,
            avatar: item.paths || 0,
        }));
        //rankList 不足 10的时候，补充空白的数组到 10个
        while (rankList.value.length < 10) {
            rankList.value.push({
                nickname: '',
                score: 0,
                avatar: 0
            })
        }
    } catch (error) {
        console.error('获取排名列表失败:', error);
    }
}

watch(() => props.isVisible, (newVal) => {
    if (newVal) {
        getRankList();
    }
})


const emit = defineEmits(['close'])

const closeModal = () => {
    emit('close')
}

</script>

<style lang="scss" scoped>
// 输入框区域
.rank-area {
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1270px;
    height: 415px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    .rank-item {
        height: 73px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        margin-bottom: 10px;
        padding-left: 220px;
        padding-right: 60px;
    }

    .nickname {
        font-size: 30px;
        font-weight: bold;
        line-height: normal;
        text-align: center;
        letter-spacing: 0em;
        font-variation-settings: "opsz" auto;
        font-feature-settings: "kern" on;
        color: #3d3d3d;
        margin-left: 12px;
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .score {
        width: 114px;
        text-align: center;
        font-size: 28px;
        font-weight: 900;
        line-height: normal;
        text-align: center;
        letter-spacing: 0em;
        -webkit-text-stroke: 1px #FFFFFF;
        color: #FFFFFF;
    }
}
</style>